<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title i18n="optionsTitle">IHeader选项</title>
  <link rel="shortcut icon" type="image/x-icon" href="./images/lightning_green.png">
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Helvetica,arial,sans-serif;
      font-weight: 200;
      line-height: 1;
    }
    header {
      background: #F1F1F1;
      position: fixed;
      left: 0px;
      top: 0px;
      right: 0px;
      height: 80px;
      z-index: 1;
      border-bottom: 1px solid #E9E9E9;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, .15);
    }
    .content {
      width: 800px;
      height: 100%;
      margin: 0 100px;
    }
    header img {
      position: relative;
      float: left;
      width: 64px;
      top: 50%;
      transform: translate(0, -50%);
    }
    header span {
      margin-left: 10px;
      font-size: 36px;
      line-height: 80px;
    }
    .container {
      box-sizing: border-box;
      padding: 90px 0 60px;
      overflow: scroll;
    }
    .title {
      font-size: 18px;
      font-weight: 400;
      line-height: 2;
    }
    .margin-top20 {
      margin-top: 20px;
    }
    .settings {
      padding-left: 10px;
    }
    .check {
      user-select: none;
    }
    p label {
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }
    .describe {
      padding-left: 10px;
      font-size: 14px;
    }
    .btn {
      vertical-align: bottom;
    }
    footer {
      position: fixed;
      bottom: 0;
      background: #F1F1F1;
      width: 100%;
      height: 40px;
      line-height: 40px;
      z-index: 1;
      border-top: 1px solid #E9E9E9;
      -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .15);
      box-shadow: 0 0 8px rgba(0, 0, 0, .15);
      text-align: center;
      color: #606060;
    }
    footer span {
      margin-left: 15px;
    }
    footer a {
      color: #4D7BD6;
      text-decoration: none;
    }
  </style>
  </head>
  <body>
    <header>
      <div class="content">
        <img src="./images/lightning_green64.png" alt="icon"/>
        <span>IHeader</span>
      </div>
    </header>
    <div class="container content">
      <div class="title">
        请选择需要监听的请求类型
      </div>
      <div id="settings" class="settings"></div>
      <div class="describe">
        新开的监听会在修改后立即生效，已经开启的监听是否需要立即刷新
        <input type="button" id="reload" class="btn icon-refresh icon" disabled />
      </div>
      <div class="title margin-top20">
        请设置默认的CORS规则
      </div>
      <div class="settings">
        <p>
          <input type="checkbox" id="cors">
          <label for="cors">Tab开启监听时, 默认为其所有请求添加CORS响应头</label>
        </p>
      </div>
      <div class="settings">
        <p>
          <input type="checkbox" id="global_iframe_breakout">
          <label for="global_iframe_breakout">all listener: 默认为所有请求去除X-Frame-Options响应头</label>
        </p>
      </div>
    </div>
    <footer>
      <span>Copyright © louis</span>
      <span>Version 1.1.0</span>
      <span><a href="http://github.com/Louiszhai/IHeader">Github</a></span>
    </footer>
  </body>
  <script src="./js/options.js"></script>
</html>
